@charset "utf-8";
/* Nordlicht Navigation Icons
	
	Table of Contents:
	@0 - All Icons
	@1 - Today
	@2 - Year to Date
	@3 - Calander
	@4 - Clock
		@4.1 - Hours
	@5 - Browser
	@6 - OS
	@7 - Geo
	@8 - File
	@9 - Robot
	@10 - Search
	@11 - Error
*/
/*@0 All Icons*/
.navIcon {
	position:absolute;
	left:2px;
	top:2px;
	width:32px;
	height:32px;
}

/*@1 Today*/
.todayIcon {
	background:#fff;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	-webkit-border-bottom-left-radius:4px;
	-webkit-border-bottom-right-radius:4px;
	-moz-border-radius-bottomleft:4px;
	-moz-border-radius-bottomright:4px;
	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
	-webkit-box-shadow:inset 1px 1px 4px rgba(41,41,41,0.5);
	-moz-box-shadow:inset 1px 1px 4px rgba(41,41,41,0.5);
	text-align:center;
	color:#000;
	text-shadow:0px 1px 0px #666;
	font-weight:bold;
	width:32px;
	height:32px;
}
.todayIcon > span {
	font-size:10px;
	font-weight:normal;
	text-shadow:none;
	background:rgba(255,13,0,0.9);
	-webkit-border-top-left-radius:2px;
	-webkit-border-top-right-radius:2px;
	-moz-border-radius-topleft:2px;
	-moz-border-radius-topright:2px;
	border-top-left-radius:2px;
	border-top-right-radius:2px;
	display:block;
	width:32px;
	height:12px;
}

/*@2 Year to Date*/

/*@3 Calander*/
#monthIcon { top:0px; }
.calRing {
	background:#000;
	border-radius:5px;
	-moz-border-radius:5px;
	width:5px;
	height:15px;
	display:block;
	border-bottom-color:#900;
	position:absolute;
	top:0;
	z-index:100;
}
.monthIcon .calRing:nth-child(1) { left:4px; }
.monthIcon .calRing:nth-child(2) { right:4px; }
.calPaper {
	position:absolute;
	top:8px;
	left:1px;
	background:#fff;
	display:block;
	width:30px;
	height:25px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	-webkit-box-shadow:2px 2px 2px #333333,
			inset 3px 2px 5px rgba(255, 255, 255, 0.4),
			inset -1px -1px 5px #292929;
	-moz-box-shadow:2px 2px 2px #333333,
			inset 3px 2px 5px rgba(255, 255, 255, 0.4),
			inset -1px -1px 5px #292929;
	box-shadow:2px 2px 2px #333333,
			inset 3px 2px 5px rgba(255, 255, 255, 0.4),
			inset -1px -1px 5px #292929;
}
.calName {
	margin:6px auto 0;
	display:block;
	color:rgba(41,41,41,1);
	font-size:13px;
	font-weight:bold;
	text-align:center;
	text-shadow:0px 1px 0px #CCC;
	width:28px;
}

/*@4 Clock*/
.clock {
	background:#5B2216;
	background:-moz-linear-gradient(top, #5B2216 0%, #752201 15%, #26150A 25%, #FFFFFF 45%, #8c3310 50%, #752201 51%, #FFFFFF 55%, #26150A 75%, #752201 85%, #5B2216 100%);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#5B2216), color-stop(15%,#752201), color-stop(25%,#26150A), color-stop(45%,#FFFFFF), color-stop(50%,#8c3310), color-stop(51%,#752201), color-stop(55%,#FFFFFF), color-stop(75%,#26150A), color-stop(85%,#752201), color-stop(100%,#5B2216));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5B2216', endColorstr='#5B2216',GradientType=0 );
	border:2px solid #3d3d3d;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	margin:0 auto;
	position:relative;
	width:95%;
	height:95%;
}

.hourHand,
.minuteHand,
.clockDot {
	position:absolute;
	-webkit-transform-origin:50% 100%;
	-moz-transform-origin:50% 100%;
	-o-transform-origin:50% 100%;
	transform-origin:50% 100%;
}

.hourHand {
	background:#0D9EF2;
	margin-left:-1px;
	left:50%;
	top:20%;
	width:2px;
	height:33%;
}

.minuteHand {
	background:#0D9EF2;
	margin-left:-1px;
	left:50%;
	width:2px;
	height:50%;
}

.clockDot {
	background:#646464;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	margin-top:-3px;
	margin-left:-3px;
	top:50%;
	left:50%;
	width:6px;
	height:6px;
	-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5),
			-1px -1px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5),
			-1px -1px 3px rgba(0, 0, 0, 0.5);
	box-shadow:1px 1px 3px rgba(0, 0, 0, 0.5),
			-1px -1px 3px rgba(0, 0, 0, 0.5);
}
/*@4.1 Hours*/
.hour01 {
	-webkit-transform:rotate(30deg);
	-moz-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	transform:rotate(30deg);
}
.hour02 {
	-webkit-transform:rotate(60deg);
	-moz-transform:rotate(60deg);
	-o-transform:rotate(60deg);
	transform:rotate(60deg);
}

.hour03 {
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
}
.hour04 {
	-webkit-transform:rotate(120deg);
	-moz-transform:rotate(120deg);
	-o-transform:rotate(120deg);
	transform:rotate(120deg);
}
.hour05 {
	-webkit-transform:rotate(150deg);
	-moz-transform:rotate(150deg);
	-o-transform:rotate(150deg);
	transform:rotate(150deg);
}

.hour06 {
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}
.hour07 {
	-webkit-transform:rotate(210deg);
	-moz-transform:rotate(210deg);
	-o-transform:rotate(210deg);
	transform:rotate(210deg);
}

.hour08 {
	-webkit-transform:rotate(240deg);
	-moz-transform:rotate(240deg);
	-o-transform:rotate(240deg);
	transform:rotate(240deg);
}

.hour09 {
	-webkit-transform:rotate(270deg);
	-moz-transform:rotate(270deg);
	-o-transform:rotate(270deg);
	transform:rotate(270deg);
}

.hour10 {
	-webkit-transform:rotate(300deg);
	-moz-transform:rotate(300deg);
	-o-transform:rotate(300deg);
	transform:rotate(300deg);
}

.hour11 {
	-webkit-transform:rotate(330deg);
	-moz-transform:rotate(330deg);
	-o-transform:rotate(330deg);
	transform:rotate(330deg);
}

/*@5 Browser*/

/*@6 OS*/
.OSIcon { }
.OSscreen {
	background:none repeat scroll 0 0 #145AF5;
	border:2px solid #D6D6D6;
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;	
	display:block;
	height:20px;
	position:absolute;
	width:28px;
	z-index:100;
	-moz-box-shadow:inset 0 5px 5px rgba(255, 255, 255, 0.6),
			inset 5px 0 15px rgba(255, 255, 255, 0.3),
			inset 0 0 5px #000,
			inset -5px -5px 13px rgba(255, 255, 255, 0.3),
			inset -1px -1px 1px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:inset 0 5px 5px rgba(255, 255, 255, 0.6),
			inset 5px 0 15px rgba(255, 255, 255, 0.3),
			inset 0 0 5px #000,
			inset -5px -5px 13px rgba(255, 255, 255, 0.3),
			inset -1px -1px 1px rgba(0, 0, 0, 0.4);
	box-shadow:inset 0 5px 5px rgba(255, 255, 255, 0.6),
			inset 5px 0 15px rgba(255, 255, 255, 0.3),
			inset 0 0 5px #000,
			inset -5px -5px 13px rgba(255, 255, 255, 0.3),
			inset -1px -1px 1px rgba(0, 0, 0, 0.4);
}
.OSbase {
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
	background:none repeat scroll 0 0 #333333;
	display:block;
	height:10px;
	left:7px;
	position:absolute;
	top:21px;
	width:20px;
	z-index:99;
	-webkit-box-shadow:1px 1px 3px #fff inset;
	-moz-box-shadow:1px 1px 3px #fff inset;
	box-shadow:1px 1px 3px #fff inset;
}

/*@7 Geo*/
.countryIcon {
	height:24px;
	background:#fff;
	-moz-box-shadow:inset 4px 4px 10px rgba(41,41,41,0.4);
	-webkit-box-shadow:inset 4px 4px 10px rgba(41,41,41,0.4);
	box-shadow:inset 4px 4px 10px rgba(41,41,41,0.4);
}
.ring {
	border:1px solid;
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	width:8px;
	height:8px;
	background:none;
	position:absolute;
	display:block
}
.ring1 {
	border-color:#00C;
	left:1px;
	top:5px;
}
.ring2 {
	left:11px;
	top:5px;
}
.ring3 {
	border-color:#C00;
	left:22px;
	top:5px;
}
.ring4 {
	border-color:#FF0;
	left:6px;
	top:10px;
}
.ring5 {
	border-color:#060;
	left:18px;
	top:10px;
}

/*@8 File*/
.fileIcon {
	background: none repeat scroll 0 0 #FFFFFF;
	-webkit-border-radius:1px;
	-moz-border-radius:1px;
	border-radius:1px;	
	width:28px;
	-webkit-box-shadow:inset 0 -2px 7px rgba(41, 41, 41, 0.4);
	-moz-box-shadow:inset 0 -2px 7px rgba(41, 41, 41, 0.4);
	box-shadow:inset 0 -2px 7px rgba(41, 41, 41, 0.4);
}
.fileIcon > span {
	border-color:rgba(0,0,0, 0.1) rgba(0, 0, 0, 0.1) #fff #fff;
	border-style:solid;
	border-width:5px;
	display:block;
	height:0;
	width:0;
	-webkit-box-shadow:-1px 2px 2px #000000;
	-moz-box-shadow:-1px 2px 2px #000000;
	box-shadow:-1px 2px 2px #000000;
	position:absolute;
	left:18px;
	top:0;
	z-index:10;
}
.fileIcon table {
	border:none;
	border-collapse:collapse;
	margin:0;
	margin-left:-35%;
	padding:0;
	width:70%;
	position:absolute;
	left:50%;
	top:10%;
	z-index:9;
}
.fileIcon tr {
	border:1px solid #b3b3b3;
	border-left:none;
	border-right:none;
	height:4px;
	width:100%;
}

/*@9 - Robot Icon*/
.robotIcon { top:6px; }
.robotIcon .robotAntena {
	border:2px solid rgba(220,70,0,0.8);
	height:14px;
	width:0;
	display:block;
	position:absolute;
	top:-7px;
	z-index:90;
}
.robotIcon .robotAntena:nth-child(1) { left:8px; -moz-transform:rotate(150deg); -webkit-transform:rotate(150deg); }
.robotIcon .robotAntena:nth-child(2) { right:8px; -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); }
.robotIcon .robotFace {
	background:rgba(41,41,41,0.9);
	-moz-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5),
					inset 5px 5px 3px rgba(0,0,0,0.7);
	-webkit-box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5),
						inset 5px 5px 3px rgba(0,0,0,0.7);
	box-shadow:inset 1px 1px 1px rgba(255,255,255,0.5),
				inset 5px 5px 3px rgba(0,0,0,0.7);
	width:30px;
	height:28px;
	display:block;
	position:relative;
	margin:0 auto;
	z-index:100;
}
.robotIcon .robotEye {
	display:block;
	width:2px;
	height:2px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	border:4px solid #fff;
	background:#000;
	position:absolute;
	top:3px;
}
.robotIcon .robotEye:nth-child(1) { left:1px; }
.robotIcon .robotEye:nth-child(2) {	right:1px; }
.robotIcon .robotMouth {
	background:#fff;
	border-collapse:collapse;
	margin:0;
	padding:0;
	position:absolute;
	bottom:1px;
	left:4px;
}
.robotIcon .robotMouth tr { border:none; }
.robotIcon .robotMouth tr td {
	width:3px;
	height:4px;
	border:2px solid;
	padding:0;
}

/*@10 Search*/
.searchIcon {
	left:-2px;
	top:0;
}
.searchGlass {
	background:#29ACE0;
	border:2px solid rgba(61, 61, 61, 1);
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	width:60%;
	height:60%;
	margin:0 auto;
	display:block;
	-moz-box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.6),
			-2px -2px 10px #ADD8E6;;
	-webkit-box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.6),
			-2px -2px 10px #ADD8E6;;
	box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.6),
		-2px -2px 10px #ADD8E6;
	position:relative;
	z-index:10;
}

.searchHandle {
	background:#3D3D3D;
	position:absolute;
	position: absolute;
	left:45%;
	bottom:-28%;
	width:4px;
	height:130%;
	-webkit-transform-origin:50% 30%;
	-webkit-transform:rotate(-30deg);
	-moz-transform-origin:50% 30%;
	-moz-transform:rotate(-30deg);
	-o-transform-origin:50% 30%;
	-o-transform:rotate(-30deg);
	transform-origin:50% 30%;
	transform:rotate(-30deg);
	z-index:9;
}

.searchTab:hover .searchIcon .searchGlass {
	background:#3FF;
	-webkit-box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.6),
			2px 2px 10px #960;
	-moz-box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.6),
			2px 2px 10px #960;
	box-shadow:inset -2px -2px 6px rgba(255, 255, 255, 0.6),
			2px 2px 10px #960;
	-webkit-transition:1.5s;
	-webkit-transition-timing-function:ease-in-out;
	-moz-transition:1.5s;
	-moz-transition-timing-function:ease-in-out;
	-o-transition:1.5s;
	-o-transition-timing-function:ease-in-out;
	transition:1.5s;
	transition-timing-function:ease-in-out;
}

.searchTab:hover .searchIcon .searchHandle {
	-webkit-transform:rotate(390deg);
	-webkit-transition:1.5s;
	-webkit-transition-timing-function:ease-in-out;
	-moz-transform:rotate(390deg);
	-moz-transition:1.5s;
	-moz-transition-timing-function:ease-in-out;
	-o-transform:rotate(390deg);
	-o-transition:1.5s;
	-o-transition-timing-function:ease-in-out;
	transform:rotate(390deg);
	transition:1.5s;
	transition-timing-function:ease-in-out;
}

/*@11 Error*/
.errorIcon { 
	background:rgba(161,14,14,1);
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	color:#fff;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:26px;
	text-align:center;
	text-shadow:0px -1px 1px #333;
	-webkit-box-shadow:inset 1px 1px 5px rgba(255,130,130,0.4),
			inset 0px -2px 5px rgba(0,0,0,0.5),
			inset 0px 2px 5px rgba(255,255,255,0.2);
	-moz-box-shadow:inset 1px 1px 5px rgba(255,130,130,0.4),
			inset 0px -2px 5px rgba(0,0,0,0.5),
			inset 0px 2px 5px rgba(255,255,255,0.2);
	box-shadow:inset 1px 1px 5px rgba(255,130,130,0.4),
			inset 0px -2px 5px rgba(0,0,0,0.5),
			inset 0px 2px 5px rgba(255,255,255,0.2);
	-webkit-transition:1s;
	-webkit-transition-property:background;
	-webkit-transition-timing-function:ease-out;
	-moz-transition:1s;
	-moz-transition-property:background;
	-moz-transition-timing-function:ease-out;
	-o-transition:1s;
	-o-transition-property:background;
	-o-transition-timing-function:ease-out;
	transition:1s;
	transition-property:background;
	transition-timing-function:ease-out;
}

/* We use generated content for the X this way we can change it to an ! on hover, and an ? on active*/
.errorIcon::after {
	content:"X";
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;
}
.errorsTab:hover .errorIcon			{ background:#F4F44A; }
.errorsTab:hover .errorIcon::after	{ content:"!"; color:#000; text-shadow:0 -1px 1px #fff; }

.errorsTab:active .errorIcon			{ background:#2AC928; }
.errorsTab:active .errorIcon::after 	{ content:"?"; }
